<template>
  <view class="container">
    <view class="form-item">
      <text class="label">任务名称</text>
      <input v-model="form.taskName" disabled placeholder="任务名称" />
    </view>

    <view class="form-item">
      <text class="label">项目名称</text>
      <input v-model="form.projectName" disabled placeholder="项目名称" />
    </view>

    <view class="form-item">
      <text class="label">工作描述</text>
      <textarea v-model="form.description" placeholder="请输入工作描述" rows="4" />
    </view>

    <view class="form-item">
      <text class="label">上传截图</text>
      <button type="primary" size="mini" @click="chooseImage">选择图片</button>
      <image
        v-if="previewImage"
        :src="previewImage"
        mode="aspectFit"
        class="preview-image"
      />
    </view>

    <view class="form-item">
      <button type="primary" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        taskId: '',
        taskName: '',
        projectName: '',
        description: '',
        screenshotPath: ''
      },
      previewImage: ''
    };
  },
  onLoad(options) {
    if (options.task) {
      const task = JSON.parse(decodeURIComponent(options.task));
      this.form.taskId = task.taskId;
      this.form.taskName = task.taskName;
      this.form.projectName = task.projectName;
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.previewImage = tempFilePath;

          // 上传图片到服务器
          uni.uploadFile({
            url: this.$baseUrl + '/work/file/UploadOneFile', // 替换为你后端图片上传接口
            filePath: tempFilePath,
            name: 'file',
            header: {
              'satoken': uni.getStorageSync('token')
            },
            success: (uploadRes) => {
              const data = JSON.parse(uploadRes.data);
              if (data.code === 200) {
                this.form.screenshotPath = data.data;
                uni.showToast({ title: '上传成功', icon: 'success' });
              } else {
                uni.showToast({ title: data.message || '上传失败', icon: 'none' });
              }
            },
            fail: () => {
              uni.showToast({ title: '上传失败', icon: 'none' });
            }
          });
        }
      });
    },
    submitForm() {
      if (!this.form.description || !this.form.screenshotPath) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }

      const token = uni.getStorageSync('token');
      uni.request({
        url: this.$baseUrl + '/work/submitProgress',
        method: 'POST',
        header: {
          'satoken': token,
          'Content-Type': 'application/json'
        },
        data: {
          taskId: this.form.taskId,
		  taskName: this.form.taskName,
		  projectName: this.form.projectName,
          description: this.form.description,
          screenshotPath: this.form.screenshotPath
        },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({ title: '提交成功', icon: 'success' });
            setTimeout(() => {
              uni.navigateTo({
              	url: `/pages/WorkPages/WorkPages`
              });
            }, 1500);
          } else {
            uni.showToast({ title: res.data.message || '提交失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
}
.form-item {
  margin-bottom: 30rpx;
}
.label {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #333;
}
input,
textarea {
  width: 100%;
  padding: 20rpx;  
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  font-size: 28rpx;
  background-color: #fff;
  box-sizing: border-box;
  min-height: 80rpx;
}
textarea {
  height: 200rpx;
  resize: none;
  overflow-y: auto;
}
.preview-image {
  width: 100%;
  max-height: 400rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
}
</style>